import { FC, useCallback } from 'react';
import { message, Upload } from 'antd';

import FilesCrop from 'rb-files-crop';
import { Header, Content } from '@/components/Page';

import otherFiles from '@assets/images/files/otherFiles.svg';

const WapperUpload: FC = () => {
  const handleBeforeUpload = useCallback((file: any) => {
    const accept = '';
    const singleFileMaxSize = 0.1;

    // 文件类型校验
    const fileSuffix = file.name.slice(file.name.lastIndexOf('.'));
    const isFileTypeExceeded = accept ? !(accept as any).split(',').includes(fileSuffix) : false;
    if (isFileTypeExceeded) {
      message.error(`你只能上传${accept}文件！`);
    }

    // 文件大小校验
    const isFileSizeExceeded = singleFileMaxSize
      ? file.size > singleFileMaxSize * 1024 * 1024
      : false;
    if (isFileSizeExceeded) {
      message.error(`文件大小不能超过${singleFileMaxSize}MB！`);
    }

    return (!isFileTypeExceeded && !isFileSizeExceeded) || Upload.LIST_IGNORE;
  }, []);

  return (
    <>
      <Header title="附件上传容器" backPath="/test-pages" />
      <Content>
        <FilesCrop editModalTitle="外部传入标题" previewIcons={{ pdf: otherFiles }}>
          <Upload action="111" listType="picture-card" multiple beforeUpload={handleBeforeUpload}>
            上传
          </Upload>
        </FilesCrop>
      </Content>
    </>
  );
};

export default WapperUpload;
